<template>
  <div>
    <div class="head-search">
      <search @onSubmit="onSearch">
        <el-form-item>
          <el-input placeholder="请输入内容" clearable v-model="searchData.val" size="small" class="input-with-select">
            <el-select v-model="searchData.select" clearable slot="prepend" placeholder="请选择">
              <el-option v-for="(item, index) in headTableList"
                         :key="index"
                         :label="item.mdName"
                         :value="item.mdCode"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
      </search>
    </div>

    <section class="list-box">
      <el-table
        :data="tableData"
        border
        height="calc(100vh - 230px)"
        class="table">
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="55">
        </el-table-column>

        <el-table-column
          v-for="(item, index) in headTableList"
          :key="index"
          show-overflow-tooltip
          :prop="item.mdCode"
          :label="item.mdName"
          :width="item.width > 80 ? item.width : 80"
        >
        </el-table-column>

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button @click="handleHookUp(scope.row)"
                       icon="el-icon-s-ticket"
                       type="text">挂接
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="listTable"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNo"
        :page-sizes="[20, 40, 60, 80]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTable ? Number(listTable.total) : 0">
      </el-pagination>
    </section>

  </div>
</template>

<script>
import Search from '../../../../../../components/search/search'
import { mapFields } from 'vuex-map-fields'
import { mapActions } from 'vuex'
import { addVolumerequest } from '../../../../../../api/electronicsFile/electronicsFile'

export default {
  name: 'hookUpVolumeArchives',
  props: {
    idTable: {
      type: String
    },
    id: {
      type: String
    }
  },
  components: { Search },
  data () {
    return {
      searchData: {
        val: '', // 筛选
        select: '' // 筛选
      },
      page: {
        pageNo: 1,
        pageSize: 20
      },
      params: []
    }
  },
  computed: {
    ...mapFields('electronicsFile/getCategoryAll', {
      headTable: 'retrievedHead',
      listTable: 'retrievedList'
    }),
    ...mapFields('electronicsFile/getSearch', {
      searchOptions: 'retrieved'
    }),
    headTableList () {
      return this.headTable ? this.headTable : []
    },
    tableData () {
      return this.listTable ? this.listTable.records : []
    }
  },
  methods: {
    ...mapActions('electronicsFile/getAnjuan', ['getTableajHead', 'getTableajList']),
    getList () {
      const query = {
        idTable: this.idTable,
        data: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          params: this.params
        }
      }
      if (this.params.length === 0) {
        delete query.data.params
      }
      this.getTableajList(query)
    },
    onSearch () {
      // 搜索
      if (this.searchData.val) {
        this.params.push({
          name: this.searchData.select,
          op: 'like',
          value: this.searchData.val
        })
      } else {
        this.params = []
      }
      this.getList()
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getList()
    },
    handleHookUp (row) {
      addVolumerequest(this.idTable, {
        arcId: row.id,
        ids: [this.id]
      }).then(() => {
        this.$message.success('挂接成功！')
        this.getList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
